/* pages/car/index.scss */
.car-page {
  background-color: #f5f6f7;
  min-height: 85vh;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 40rpx 0;
    width: 100%;
    background-color: #fff;
    z-index: 3;

    .count {
      color: #a6aab2;
      margin-left: 30rpx;
    }

    .manage {
      margin-right: 30rpx;
    }
  }

  &::before {
    content: "";
    display: block;
    height: 122rpx;
  }

  .car-list {
    .car-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      padding: 20rpx 30rpx;
      background-color: #fff;
      box-shadow: 0 2rpx 2rpx 2rpx rgba(0, 0, 0, .1);

      image {
        margin: 0 30rpx;
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }

      .good-info {
        flex: 1;

        .name {
          margin-bottom: 30rpx;
          font-size: 30rpx;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .data {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    .endload {
      padding: 60rpx 0;
      color: #999da6;
      background-color: #f5f6f7;
      font-size: 30rpx;
      text-align: center;
    }
  }

  &::after {
    content: "";
    display: block;
    height: 162rpx;
  }

  .footer {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 40rpx 30rpx;
    width: 100%;
    background-color: #fff;
    box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, .1);
    z-index: 2;

    .all-checked {
      margin: 0 10rpx
    }

    .all-checked,
    .checkedCount {
      color: #a6aab2;
    }

    .total-price {
      margin-right: 80rpx;
    }

    .settlement,
    .clear-checked {
      width: 200rpx;
      margin-left: 20rpx;
      padding: 20rpx 40rpx;
      background-color: #1296db;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
    }

    .clear-checked {
      background-color: #e25141;
    }
  }
}